{include file='common/header'}
{include file='common/nav'}
<link rel="stylesheet" href="{:HOME_ROOT}/css/index.css"/>

<div id="container">

    <div class='list'>
        <div class='item' v-for="item in list">
            <div class='avatar'>
                <a :href="'{:url('Member/center')}?id=' + item.id">
                    <img :src="'{:WEB_ROOT}' + item.avatar" />
                </a>
            </div>
            <div class='info'>
                <div class='about'>
                    <a :href="'{:url('Member/center')}?id=' + item.id" class='author'>{{item.nickname}}</a>
                    <a :href="'{:url('Diary/book')}?id=' + item.book_id" class='book'>《{{item.book_name}}》</a>
                </div>
                <div class="intro">
                    <a :href="'{:url('Diary/reply')}?did=' + item.id">{{item.content}}</a>
                    <div class="pic" v-show="item.url">
                        <img :src="'{:WEB_ROOT}' + item.url" />
                    </div>
                </div>
                <div class='option'>
                    <div class='time'>{{item.time}}</div>
                    <div class='reply'>
                        <a :href="'{:url('Diary/reply')}?did=' + item.id">
                            <img src='{:HOME_ROOT}/img/comment.png' />
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="load" v-show="loading">
        <div class="sk-three-bounce t-5">
            <div class="loading-overlay"></div>
            <div class="sk-child sk-bounce1"></div>
            <div class="sk-child sk-bounce2"></div>
            <div class="sk-child sk-bounce"></div>
        </div>
    </div>

    <button class="load_more" v-show="!loading" v-on:click="loadFlag && load()">{{loadTips}}</button>

    {include file="common/dialog"}

</div>

{include file="common/footer"}

<script>

    VUEOPT.data.pageNum = 1;
    VUEOPT.data.list = [];
    VUEOPT.data.loading = 0;
    VUEOPT.data.loadFlag = true;
    VUEOPT.data.loadTips = '加载更多';

    VUEOPT.mounted = function(){
        this.load();
    };

    VUEOPT.methods.load = function(){
        var that = this;
        that.loading = 1;
        post("{:url('Index/_list')}", buildData(this, ['pageNum']), function (res) {
            that.loading = 0;
            if(res.data.length > 0){
                that.pageNum += 1;
                for(var i in res.data){
                    that.list.push(res.data[i]);
                }
            }else{
                that.loadFlag = false;
                that.loadTips = '没有更多了';
            }
        });
    };

    Loaded(function () {
        var vm = new Vue(VUEOPT);
    });

</script>